<template>
  <ul class="tab-list">
    <li v-for="(tab, index) in items" :key="index"
      :class="`tab-item ${index == currentIndex ? '__on' : ''}`"
      @click="change(index)">{{tab}}</li>
  </ul>
</template>

<script>
export default {
  props: ['items', 'currentIndex'],
  methods: {
    change (index) {
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  &-list {
    display: flex;
    list-style: none;
    width: 100%;
    white-space: nowrap;
    background: $bg;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  &-item {
    flex: 1;
    padding: 0.5em;
    text-align: center;
    color: $color-gray;
    border-bottom: 2px solid $bg;

    &.__on {
      color: $color;
      border-color: $color;
    }
  }
}
</style>
